<template>
  <div class="needExa">
    <div class="needExa_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待审核<i class="el-icon-close"></i></div>
    </div>

    <!-- 头部导航 -->
    <div class="navTab">
      <div class="navTabList">
        <div
          class="navTabItem"
          :class="{ navTabItem_active: navIndex == index }"
          v-for="(item, index) in navTab"
          :key="index"
          @click="navFn($event)"
          :data-index="index"
        >
          {{ item }}
          <div class="navBorder" v-if="navIndex == index"></div>
        </div>
      </div>
    </div>
    <div style="padding: 15px 20px 0">
      卖场：
      <el-select
        v-model="marketId"
        clearable
        @change="selectMarket"
        filterable
        placeholder="请选择卖场"
      >
        <el-option
          v-for="item in marketList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>

    <!-- 表格（设计师） -->
    <div class="needExa_table">
      <div class="needExa_bottom_table">
        <table>
          <tr>
            <th></th>
            <th>序号</th>
            <th>入驻类型</th>
            <th>申请人</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>申请时间</th>
            <th>用户ID</th>
            <th>身份证照片</th>
            <th v-if="navType != 0">营业执照</th>
            <th>申请状态</th>
            <th>所属卖场</th>
            <th>操作</th>
          </tr>
          <tr v-for="(v, i) in tableList" :key="i">
            <td>
              <font
                class="checkbox"
                :class="{ check_active: checkBoxAll.includes(i) }"
                @click="handlerCheckbox(i)"
                ><i class="el-icon-check"></i
              ></font>
            </td>
            <td>{{ v.apply_id }}</td>
            <td>
              {{
                v.type == "designer_per"
                  ? "设计师"
                  : v.type == "designer"
                  ? "装修公司"
                  : v.type == "builder"
                  ? "施工队"
                  : v.type == "shop"
                  ? "商家"
                  : v.type == "maker"
                  ? "创客机构"
                  : ""
              }}
            </td>
            <td>{{ v.name }}</td>
            <td>{{ v.mobile }}</td>
            <td>{{ v.mail }}</td>
            <td>
              {{ $moment(new Date(v.apply_time * 1000)).format("YYYY-MM-DD") }}
            </td>
            <td>{{ v.user_id }}</td>
            <td>
              <div
                :data-index="i"
                class="toLook"
                @click="toLook(v.id_card_top, v.id_card_back, i, $event)"
              >
                点击查看
                <!-- 弹出框 -->
                <div class="idcardImg">
                  <el-dialog
                    title="身份证照片"
                    :visible.sync="dialogVisible"
                    width="950px"
                    top="150px"
                    :before-close="handleClose"
                  >
                    <div class="dialog-footer">
                      <div>
                        <div class="tit">身份证正面</div>
                        <img :src="id_card_top" mode="" />
                      </div>
                      <div>
                        <div class="tit">身份证反面</div>
                        <img :src="id_card_back" mode="" />
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer-btn">
                      <el-button type="primary" @click="dialogVisible = false"
                        >返回</el-button
                      >
                    </span>
                  </el-dialog>
                </div>
              </div>
            </td>
            <td v-if="navType != 0">
              <div
                :data-index="i"
                class="toLook toLookLicense"
                @click="toLookLicense(v.license, i, $event)"
              >
                点击查看
                <!-- 营业执照弹出框 -->
                <div class="idcardImg">
                  <el-dialog
                    title="营业执照"
                    :visible.sync="dialogVisible_lic"
                    width="760px"
                    top="150px"
                    :before-close="handleClose_lic"
                  >
                    <div class="dialog-footer">
                      <img :src="license" mode="" />
                    </div>
                    <span slot="footer" class="dialog-footer-btn">
                      <el-button
                        type="primary"
                        @click="dialogVisible_lic = false"
                        >返回</el-button
                      >
                    </span>
                  </el-dialog>
                </div>
              </div>
            </td>
            <td>
              {{
                v.approval_status == 0
                  ? "待审批"
                  : v.approval_status == 1
                  ? "已同意"
                  : v.approval_status == 2
                  ? "已驳回"
                  : ""
              }}
            </td>
            <td>{{v.market_name}}</td>
            <td>
              <button class="editor" @click="toPass(v.apply_id)">批准</button>
              <button
                class="delete"
                :data-index="i"
                @click="refuse(v.apply_id, i, $event)"
              >
                拒绝
              </button>
              <div class="refuse">
                <!--拒绝弹出框  -->
                <el-dialog
                  title="请输入驳回原因"
                  :close-on-press-escape="false"
                  :close-on-click-modal="false"
                  :visible.sync="dialogVisible_refu"
                  width="760px"
                  top="150px"
                  :before-close="handleClose_refu"
                >
                  <textarea
                    type="text"
                    v-model="refuseInfo"
                    placeholder="请输入"
                  ></textarea>
                  <h4 v-if="refuseStatus">驳回原因必填！</h4>
                  <span slot="footer" class="dialog-footer-btn">
                    <el-button @click="dialogVisible_refu = false"
                      >返回</el-button
                    >
                    <el-button type="primary" @click="toReject">确定</el-button>
                  </span>
                </el-dialog>
              </div>
            </td>
          </tr>
          <tr v-if="tableList.length == 0">
            <td class="table_title" colspan="15">当前数据空空如也</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 表格（装修管家） -->

    <!-- 表格（施工队） -->

    <!-- 表格（商家） -->

    <!-- 全选与分页 -->
    <div class="needExa_bottom_page">
      <div class="needExa_bottom_page_left">
        <div class="needExa_bottom_page_left_checkAll" @click="handerCheckAll">
          <font class="checkbox" :class="{ check_active: checkAll }"
            ><i class="el-icon-check"></i
          ></font>
        </div>
        全选
        <!-- <button class="needExa_bottom_page_left_btn" @click="selectDel">删除</button> -->
      </div>
      <div class="needExa_bottom_page_right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: null,
      activeName: "first",
      navTab: ["设计师", "装饰公司", "施工队", "商家", "装修公司", "创客机构"],
      navIndex: 0,
      tableList: [],
      navType: null,
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      page: 1,
      pageSize: 10,
      lookIndex: null,
      dialogVisible: false,
      dialogVisible_lic: false, //营业执照弹出框
      dialogVisible_refu: false, //拒绝弹框
      refuseInfo: "", //驳回原因
      refuseStatus: false, //未填写驳回原因时弹出
      rowId: "", //拒绝弹框的id
      license: "", //营业执照
      id_card_top: "", //身份证正面
      id_card_back: "", //身份证反面
      marketId: "", //卖场id
      marketList: [],
    };
  },
  mounted() {
    let user_id = localStorage.getItem("user_id");
    this.user_id = Number(user_id);
    this.getExamineList(this.navIndex);
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1
      this.pageSize = 10
      this.getExamineList(this.navIndex);
    },

    // 获取待审核列表

    getExamineList(nav) {
      this.navType = nav;
      let type =
        nav == 0
          ? "designer_per"
          : nav == 1
          ? "designer"
          : nav == 2
          ? "builder"
          : nav == 3
          ? "shop"
          : nav == 4
          ? "decoration"
          : nav == 5
          ? "maker"
          : "";
      this.$http
        .post("/api/root/Approval/index", {
          user_id: this.user_id,
          status: 0,
          page: this.page,
          pagesize: this.pageSize,
          type,
          market_id:this.marketId
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.tableList = res.data.list ? res.data.list : [];
            this.total = res.data.total;
          }
        });
    },

    // 点击头部nav
    navFn(e) {
      this.page = 1
      this.pageSize = 10
      console.log(e.target.dataset.index);
      this.navIndex = e.target.dataset.index;
      this.getExamineList(this.navIndex);
    },
    // 点击批准
    toPass(id) {
      console.log(id);
      this.$http
        .post("/api/root/Approval/regApproval", {
          user_id: this.user_id,
          apply_id: id,
          status: 1,
        })
        .then((res) => {
          if (res.code == 1) {
            this.getExamineList(this.navIndex);
            this.$message({
              showClose: true,
              message: "审核通过!",
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
        });
    },

    // 点击拒绝
    refuse(id, i, e) {
      console.log(i, e);
      this.lookIndex = e.target.dataset.index;
      if (this.lookIndex == i) {
        this.dialogVisible_refu = true;
        this.rowId = id;
      }
    },

    handleClose_refu() {
      this.dialogVisible_refu = false;
    },

    // 拒绝弹框的确定按钮
    toReject() {
      if (this.refuseInfo != "") {
        console.log(this.refuseInfo);
        this.$http
          .post("/api/root/Approval/regApproval", {
            user_id: this.user_id,
            apply_id: this.rowId,
            status: 0,
            reason: this.refuseInfo,
          })
          .then((res) => {
            if (res.code == 1) {
              this.getExamineList(this.navIndex);
              this.dialogVisible_refu = false;
              this.refuseInfo = "";
            }
          });
      } else {
        this.refuseStatus = true;
      }
    },

    // 点击查看身份证
    toLook(id_card_top, id_card_back, i, e) {
      // console.log(id_card_top,id_card_back,'8888');
      console.log(i, e);
      this.lookIndex = e.target.dataset.index;
      if (this.lookIndex == i) {
        this.dialogVisible = true;
        this.id_card_top = id_card_top;
        this.id_card_back = id_card_back;
      }
    },

    handleClose() {
      this.dialogVisible = false;
    },

    // 点击查看营业执照
    toLookLicense(license, i, e) {
      this.lookIndex = e.target.dataset.index;
      if (this.lookIndex == i) {
        this.dialogVisible_lic = true;
        this.license = license;
      }
    },

    handleClose_lic() {
      this.dialogVisible_lic = false;
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index > -1) {
          arr.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      this.shelvesAlls.push(this.tableList[i].product_id);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
      } else {
        this.checkBoxAll = [];
      }
      // 去重
      let res = this.checkBoxAll;
      for (let i = 0; i < res.length; i++) {
        for (let j = i + 1; j < res.length; j++) {
          if (res[i] == res[j]) {
            res.splice(j, 1);
            j--;
          }
        }
      }
      this.checkBoxAll.map((v) => {
        return this.shelvesAlls.push(this.tableList[v].store_id.toString());
      });
    },

    // 全选中删除
    // selectDel(){

    // },

    //分页
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val;
      console.log(val);
      this.getExamineList(this.navIndex);
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(val);
      this.getExamineList(this.navIndex);
    },
  },
};
</script>

<style lang="less" scoped>
@import "needExamine.less";
</style>

